<template>
  <div>这是视频页面</div>
  <button @click="toShow">跳转到演出页</button>
</template>

<script>
export default {
  methods: {
    toShow() {
      // this.$router表示整个路由实例
      // console.log(this.$router);

      // push方法就可以用于做页面的跳转
      // this.$router.push("/show");
      // this.$router.push({ path: "/show" });
      // this.$router.push({ name: "show" });
      // this.$router.push("/detail/12345");
      // this.$router.push({ name: "detail", params: { id: 23456 } });
      // this.$router.push({ path: "/detail", query: { id: 34567 } });

      // replace方法也可以用于页面跳转
      // push是在历史记录中追加，可以后退的
      // replace是在历史记录中替换当前页面，不能后退到当前页面了
      // this.$router.replace("/show");

      // go方法里面传入整数，用于做前进和后退
      this.$router.go(1);
      // this.$router.go(-2);

      // 如果需要有逻辑判断，那么最好使用编程式导航
      // 如果是导航，并且需要高亮，那么使用声明式导航更加方便
    },
  },
};
</script>
